<template>
  <div>
    <input type="text" v-model="keyword" />
    <div>
      <p v-for="item in searchLists.results" :key="item.id">{{ item.title }}</p>
    </div>
  </div>
</template>

<script>
import {
  ref,
  reactive,
  shallowRef,
  shallowReactive,
  watch,
  toRefs,
  triggerRef,
} from "vue";
export default {
  name: "CourseCase",
  setup() {
    /*
    const keyword = ref("");
    const searchLists = shallowReactive({
      results: [],
    });
    watch(keyword, newV => {
      fetch(
        "https://so.edianzu.com/sug?time=1662432479517&code=125101630667e930c99572cb8155462d&plat=2&q=%E5%B0%8F%E7%B1%B3&size=10"
      )
        .then(res => res.json())
        .then(({ data }) => {
          searchLists.results = data;
          console.log(searchLists.results);
        });
    });
    return {
      keyword,
      ...toRefs(searchLists),
    };
    */
    const keyword = ref("");
    const searchLists = shallowRef({
      results: [],
    });
    watch(keyword, newV => {
      fetch(
        "https://so.edianzu.com/sug?time=1662432479517&code=125101630667e930c99572cb8155462d&plat=2&q=%E5%B0%8F%E7%B1%B3&size=10"
      )
        .then(res => res.json())
        .then(({ data }) => {
          searchLists.value.results = data;
          // console.log(searchLists.results);
          triggerRef(searchLists); // 将最新的ref数据 searchLists 通过triggerRef强制渲染一下。
        });
    });
    return {
      keyword,
      searchLists,
    };
  },
};
</script>

<style lang="scss" scoped></style>
